Coding JavaScript for Mobile Browsers (part 4)

2.4. Platform detection

JavaScript has a native navigator object representing the client browser on which the code is running. We can use this technique to detect what device our code is running on and make a decision based upon that.

Note:

When using a for, remember to define the index variable as a local file with var i=initial_value. If not, you’ll be using a global variable, which can have some performance and bug issues.

The navigator object has many properties, but the most useful are appName (the browser’s name), appVersion (the browser’s version), mimeTypes (an array of supported MIME types), plugin (an array of supported plug-ins for object tag), platform (the operating system), and userLanguage.

Generally, we will use the string’s indexOf function to verify whether some of these attributes have the values we are looking for. For example:

// Detects if it is an Android device
var android = (navigator.platform.indexOf("android")>=0);
if (android) {
   // Do something
}

Table 6 shows what is returned from these properties for each browser. In this table, assume that <User Agent> will be replaced with each device’s user agent ID.

2.5. Window size

JavaScript has two objects related to sizes: document.documentElement and screen. The first is related to the size of the current document’s viewport, and the second to the whole screen of the device. At the time of writing, there is no browser that allows windows smaller than the whole screen. We can create web widgets for the home screen on many devices.

Note:

BlackBerry devices have a global variable, blackberry, that has two objects: location and network. The network property allows us to know whether the user is using WiFi, GPRS, EDGE, CDMA, or some other network. Android Browser, from 2.2, also has a similar property: navigator.connection.type.

The screen object has four properties: width, height, availWidth, and availHeight. The last two refer to the size available taking into account the space used by the operating system toolbars. In the mobile space, they are generally the same as the width and height values.

The most commonly used way to get the window size is via document.documentElement.clientWidth and document.documentElement.clientHeight.

The only way for these values to change while the page is loaded is in response to an orientation change, on compatible devices (landscape to portrait and vice versa). Table 7 shows which browsers can access information about the screen and window size and which support orientation changes.